/* =========================================================
   DHR – YOUNG MEDICAL FACULTY
   MODERN FACULTY DIRECTORY DESIGN
========================================================= */

/* =========================================================
   1. GLOBAL VARIABLES
========================================================= */

:root {
    --primary: #073c75;
    --primary-dark: #062c58;
    --primary-light: #0875c9;
    --secondary: #1685d5;
    --cyan: #49c5e8;

    --text-dark: #193858;
    --text-medium: #53677f;
    --text-light: #8998aa;

    --background: #f3f7fc;
    --white: #ffffff;
    --border: #e4ebf3;

    --success: #16a36a;

    --shadow-sm: 0 4px 15px rgba(19, 55, 95, .06);
    --shadow-md: 0 10px 30px rgba(19, 55, 95, .10);
    --shadow-lg: 0 18px 45px rgba(19, 55, 95, .16);

    --radius-sm: 8px;
    --radius-md: 13px;
    --radius-lg: 20px;
}


/* =========================================================
   2. GLOBAL RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    background: var(--background);
}

a {
    text-decoration: none;
}

button,
input,
select {
    font-family: inherit;
}

img {
    max-width: 100%;
}


/* =========================================================
   3. GOVERNMENT TOP HEADER
========================================================= */

.topbar {
    position: relative;
    z-index: 1001;

    background: linear-gradient(100deg, #062d59, #073c75);

    color: var(--white);
    padding: 9px 0;
}

.top-inner {
    width: 100%;
    max-width: 1440px;

    margin: auto;
    padding: 0 45px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.gov {
    display: flex;
    align-items: center;
    gap: 13px;
}

.emblem {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 8px;
    background: rgba(255,255,255,.12);

    color: #fff;
    font-size: 20px;
}

.gov-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.55;
}

.gov-copy strong {
    font-size: 12px;
    font-weight: 700;
}

.gov-copy span {
    font-size: 10px;
    color: #cbdcf1;
}

.divider {
    width: 1px;
    height: 35px;

    flex-shrink: 0;

    background: rgba(255,255,255,.3);
    margin: 0 8px;
}

.top-links {
    display: flex;
    align-items: center;
    gap: 13px;

    font-size: 11px;
    color: #e6effa;
}

.top-links a {
    color: #fff;
    transition: color .25s ease;
}

.top-links a:hover {
    color: var(--cyan);
}

.top-separator {
    color: #91b8df;
}

.social {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 7px;

    color: #fff;
    font-size: 14px;

    transition: .3s;
}

.social:hover {
    background: #fff;
    color: var(--primary) !important;
}


/* =========================================================
   4. MAIN BRAND HEADER
========================================================= */

.brand-header {
    position: relative;
    z-index: 1000;

    background: #fff;
    border-bottom: 1px solid var(--border);

    box-shadow: 0 3px 12px rgba(20, 50, 80, .035);
}

.brand-inner {
    width: 100%;
    max-width: 1440px;
    min-height: 108px;

    margin: auto;
    padding: 15px 45px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.dhr-brand {
    display: flex;
    align-items: center;
    gap: 22px;

    min-width: 0;
}

.dhr-brand img {
    width: 340px;
    max-width: 100%;
    max-height: 76px;

    object-fit: contain;
}

.brand-divider {
    width: 2px;
    height: 55px;

    flex-shrink: 0;

    background: linear-gradient(
        to bottom,
        transparent,
        var(--primary-light),
        transparent
    );
}

.programme-name {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.programme-name span {
    color: #718198;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
}

.programme-name strong {
    max-width: 470px;

    color: var(--primary);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
}

.brand-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    flex-shrink: 0;

    padding: 11px 19px;

    background: #eaf4ff;
    border: 1px solid #d7eaff;
    border-radius: 30px;

    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;

    transition: all .3s ease;
}

.brand-back:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 6px 15px rgba(7,60,117,.2);
}


/* =========================================================
   5. MAIN FACULTY PAGE
========================================================= */

.faculty-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(33, 132, 218, .035),
            transparent 25%
        ),
        var(--background);

    font-family: 'Inter', sans-serif;
}


/* =========================================================
   6. FACULTY HERO SECTION
========================================================= */

.faculty-hero {
    position: relative;
    overflow: hidden;

    padding: 20px 7% 20px;

    background:
        linear-gradient(
            115deg,
            #062d59 0%,
            #07549b 55%,
            #1283d0 100%
        );

    color: #fff;
}

.faculty-hero::before,
.faculty-hero::after {
    content: "";

    position: absolute;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;

    pointer-events: none;
}

.faculty-hero::before {
    width: 430px;
    height: 430px;

    right: 5%;
    top: -230px;
}

.faculty-hero::after {
    width: 300px;
    height: 300px;

    right: 19%;
    bottom: -210px;
}

.faculty-hero-content {
    position: relative;
    z-index: 2;

    max-width: 850px;
}

.faculty-hero-content::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -130px;
    bottom: -100px;

    border-radius: 50%;
    background: rgba(255,255,255,.06);

    filter: blur(2px);

    pointer-events: none;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 9px 16px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 30px;

    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.hero-tag i {
    color: #a9e4ff;
    font-size: 15px;
}

.faculty-hero h1 {
    color: #fff;

    font-size: clamp(27px, 3vw, 40px);
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.3;

    margin: 23px 0 12px;
}

.faculty-hero p {
    max-width: 700px;

    color: #d8eaff;

    font-size: 14px;
    line-height: 1.9;

    margin: 0;
}

.hero-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 35px;

    margin-top: 32px;
}

.hero-stat {
    display: flex;
    align-items: center;
    gap: 13px;
}

.hero-stat > i {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 11px;

    background: rgba(255,255,255,.12);

    color: #b9e5ff;
    font-size: 19px;
}

.hero-stat strong,
.hero-stat span {
    display: block;
}

.hero-stat strong {
    color: #fff;
    font-size: 19px;
    font-weight: 800;
}

.hero-stat span {
    color: #d4e7fa;
    font-size: 10px;
    margin-top: 3px;
    letter-spacing: .3px;
}


/* =========================================================
   7. FACULTY CONTENT SECTION
========================================================= */

.faculty-content {
    padding: 48px 0 65px;
}

.faculty-content .container-fluid {
    width: 100%;
    max-width: 1440px;

    margin: auto;
    padding: 0 45px;
}

.faculty-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 28px;
}

.section-label {
    display: inline-block;

    color: var(--primary-light);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.faculty-heading h2 {
    color: var(--text-dark);

    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.5px;

    margin: 7px 0;
}

.faculty-heading p {
    color: var(--text-light);
    font-size: 12px;
    margin: 0;
}

.faculty-total {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 18px;

    background: #e7f2ff;
    border: 1px solid #d9eaff;
    border-radius: 10px;

    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.faculty-total i {
    font-size: 17px;
}


/* =========================================================
   8. SEARCH AND YEAR FILTER
========================================================= */

.faculty-filter {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 28px;
}

.faculty-search,
.faculty-year-filter {
    height: 50px;

    display: flex;
    align-items: center;

    padding: 0 16px;

    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;

    box-shadow: var(--shadow-sm);

    transition: all .25s ease;
}

.faculty-search {
    flex: 1;
    min-width: 0;
}

.faculty-search:focus-within,
.faculty-year-filter:focus-within {
    border-color: #6bb4ef;
    box-shadow: 0 0 0 3px rgba(8,117,201,.09);
}

.faculty-search i,
.faculty-year-filter i {
    flex-shrink: 0;

    color: var(--primary-light);
    font-size: 14px;
}

.faculty-search input,
.faculty-year-filter select {
    width: 100%;
    height: 100%;

    padding-left: 12px;

    border: none;
    outline: none;

    background: transparent;

    color: var(--text-dark);
    font-family: inherit;
    font-size: 12px;
}

.faculty-search input::placeholder {
    color: #a0adbd;
}

.faculty-year-filter {
    width: 235px;
    flex-shrink: 0;
}

.faculty-year-filter select {
    cursor: pointer;
}


/* =========================================================
   9. FACULTY GRID – 3 / 2 / 1 COLUMNS
========================================================= */

.faculty-grid {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 25px;

    width: 100%;
    margin: 0 !important;
    padding: 0;
}

/* Each grid item */

.faculty-grid .faculty-item {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    max-width: none;

    margin: 0 !important;
    padding: 0 !important;
}

/* Cards inside grid */

.faculty-grid .faculty-card {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 460px;

    display: flex;
    flex-direction: column;
}

/* Tablet – 2 columns */

@media (max-width: 1100px) {
    .faculty-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}

/* Mobile – 1 column */

@media (max-width: 575px) {
    .faculty-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .faculty-grid .faculty-card {
        min-height: auto;
    }
}


/* =========================================================
   10. FACULTY CARD DESIGN
========================================================= */

.faculty-card {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 460px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #fff;
    border: 1px solid #e5edf6;
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.faculty-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--primary),
        #1298e3,
        #70d2ef
    );

    opacity: 0;
    transition: opacity .3s ease;
}

.faculty-card:hover {
    transform: translateY(-6px);

    border-color: #c6e1fb;

    box-shadow: var(--shadow-md);
}

.faculty-card:hover::before {
    opacity: 1;
}


/* =========================================================
   11. FACULTY CARD TOP
========================================================= */

.faculty-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;

    padding: 14px 17px;

    background: #f8fbff;
    border-bottom: 1px solid #edf2f8;
}

.selection-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 11px;

    background: #e7f2ff;
    border: 1px solid #d9eaff;
    border-radius: 30px;

    color: #0868bd;
    font-size: 10px;
    font-weight: 800;
}

.faculty-status {
    display: inline-flex;
    align-items: center;

    color: var(--success);
    font-size: 10px;
    font-weight: 700;
}

.faculty-status span {
    width: 7px;
    height: 7px;

    display: inline-block;

    margin-right: 7px;

    border-radius: 50%;
    background: #20bb72;

    box-shadow: 0 0 0 3px #e2f8ed;
}


/* =========================================================
   12. FACULTY PROFILE PHOTO AND NAME
========================================================= */

.faculty-profile {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    min-height: 130px;

    padding: 22px 18px;
}

.faculty-photo,
.modal-photo {
    width: 86px;
    height: 86px;

    flex-shrink: 0;
    overflow: hidden;

    border: 3px solid #e5f2ff;
    border-radius: 50%;

    background: #e8f3ff;

    box-shadow: 0 3px 12px rgba(7,60,117,.08);
}

.faculty-photo img,
.modal-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.faculty-initials {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(135deg, #0752a2, #1594db);

    color: #fff;
    font-size: 23px;
    font-weight: 800;
}

.faculty-name {
    flex: 1;
    min-width: 0;
}

.faculty-name h3 {
    color: #183b64;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;

    margin: 0 0 5px;

    overflow-wrap: anywhere;
}

.faculty-name p {
    color: #73849a;

    font-size: 11px;
    line-height: 1.6;

    margin: 0;
}

.other-designation {
    display: inline-block;

    margin-top: 6px;
    padding: 4px 8px;

    border-radius: 5px;
    background: #f0f7ff;

    color: #0875c9;
    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   13. FACULTY INFORMATION
========================================================= */

.faculty-details {
    padding: 0 18px 13px;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 14px;
}

.detail-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;
    background: #edf6ff;

    color: #0875c9;
    font-size: 13px;

    transition: .25s;
}

.faculty-card:hover .detail-icon {
    background: #e1f1ff;
}

.detail-row > div:last-child {
    flex: 1;
    min-width: 0;
}

.detail-row small,
.detail-row strong {
    display: block;
}

.detail-row small {
    color: #98a4b3;
    font-size: 9px;
    font-weight: 600;

    margin-bottom: 4px;
}

.detail-row strong {
    color: #3b506b;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;

    overflow-wrap: anywhere;
}


/* =========================================================
   14. RESEARCH PROJECT
========================================================= */

.research-section {
    flex-grow: 1;

    margin: auto 18px 16px;
    padding: 14px;

    background: linear-gradient(110deg, #f4f9ff, #f8fbff);

    border: 1px solid #e7f1fc;
    border-left: 3px solid #0875c9;
    border-radius: 7px;
}

.research-title {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #0875c9;
    font-size: 10px;
    font-weight: 800;

    margin-bottom: 8px;
}

.research-title i {
    font-size: 13px;
}

.research-section p {
    color: #586a80;

    font-size: 10px;
    line-height: 1.8;

    margin: 0;
}


/* =========================================================
   15. CARD FOOTER
========================================================= */

.faculty-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-top: auto;
    padding: 13px 18px;

    border-top: 1px solid #edf1f6;
    background: #fcfdff;
}

.faculty-department {
    flex: 1;
    min-width: 0;

    color: #7a899b;
    font-size: 9px;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

.faculty-department i {
    color: #0875c9;
    margin-right: 5px;
}

.view-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    flex-shrink: 0;

    padding: 9px 13px;

    border: 0;
    border-radius: 7px;

    background: linear-gradient(110deg, #0752a2, #087bd0);

    color: #fff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
    white-space: nowrap;

    transition: all .25s ease;
}

.view-profile-btn:hover {
    background: linear-gradient(110deg, #063c78, #0662ac);

    box-shadow: 0 5px 13px rgba(8,104,189,.23);

    transform: translateY(-2px);
}


/* =========================================================
   16. EMPTY STATE
========================================================= */

.no-faculty {
    width: 100%;
    padding: 65px 20px;

    text-align: center;

    background: #fff;
    border: 1px dashed #d4e1ee;
    border-radius: var(--radius-md);

    color: #8191a5;
}

.no-faculty > i {
    display: block;

    color: #a8c9e9;
    font-size: 42px;

    margin-bottom: 18px;
}

.no-faculty h4 {
    color: #284767;
    font-size: 17px;
    font-weight: 800;

    margin-bottom: 7px;
}

.no-faculty p {
    font-size: 12px;
    margin: 0;
}


/* =========================================================
   17. PROFILE MODAL OVERLAY
========================================================= */

.faculty-modal {
    display: none;

    position: fixed;
    z-index: 99999;
    inset: 0;

    padding: 25px 15px;

    background: rgba(5, 24, 48, .76);
    backdrop-filter: blur(5px);

    overflow-y: auto;
}

.faculty-modal.show {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.faculty-modal-content {
    width: 100%;
    max-width: 780px;
    max-height: calc(100vh - 50px);

    display: flex;
    flex-direction: column;

    margin: auto;

    background: #fff;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 25px 80px rgba(0,0,0,.3);

    animation: modalAppear .3s ease;
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   18. MODAL HEADER
========================================================= */

.modal-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;

    flex-shrink: 0;

    padding: 20px 25px;

    background: linear-gradient(110deg, #062d59, #0875c9);
    color: #fff;
}

.modal-header-custom span {
    color: #c9e4ff;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.modal-header-custom h3 {
    color: #fff;

    font-size: 19px;
    font-weight: 800;

    margin: 5px 0 0;
}

.modal-header-custom button {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;

    background: rgba(255,255,255,.1);

    color: #fff;
    font-size: 24px;
    line-height: 1;

    cursor: pointer;

    transition: .25s;
}

.modal-header-custom button:hover {
    background: #fff;
    color: var(--primary);
}


/* =========================================================
   19. MODAL PROFILE HEADER
========================================================= */

.modal-profile-header {
    display: flex;
    align-items: center;
    gap: 20px;

    flex-shrink: 0;

    padding: 27px;

    background: linear-gradient(110deg, #f2f8ff, #f9fcff);
    border-bottom: 1px solid #e6edf6;
}

.modal-photo {
    width: 100px;
    height: 100px;
}

.modal-profile-header h2 {
    color: #173b63;

    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;

    margin: 0 0 5px;
}

.modal-profile-header p {
    color: #72849a;
    font-size: 12px;

    margin: 0 0 12px;
}


/* =========================================================
   20. MODAL INFORMATION
========================================================= */

.modal-body-custom {
    padding: 25px 27px;

    min-height: 0;
    overflow-y: auto;
}

.modal-body-custom h4 {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #0868bd;

    font-size: 13px;
    font-weight: 800;

    padding-bottom: 12px;
    border-bottom: 1px solid #eaf0f6;

    margin: 15px 0 20px;
}

.modal-body-custom h4 i {
    font-size: 15px;
}

.modal-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.modal-info-grid > div {
    min-width: 0;

    padding: 12px;

    border: 1px solid #edf2f7;
    border-radius: 8px;

    background: #fcfdff;
}

.modal-info-grid small,
.modal-info-grid strong {
    display: block;
}

.modal-info-grid small {
    color: #95a2b1;
    font-size: 10px;
    font-weight: 600;

    margin-bottom: 6px;
}

.modal-info-grid strong,
.modal-full-info {
    color: #344d69;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.8;

    overflow-wrap: anywhere;
}

.modal-full-info {
    padding: 14px;

    background: #f8fbff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
}

.modal-research {
    padding: 17px;

    background: #f2f8ff;
    border: 1px solid #e2efff;
    border-left: 3px solid #0875c9;
    border-radius: 8px;

    color: #405a76;
    font-size: 12px;
    line-height: 1.9;

    overflow-wrap: anywhere;
}


/* =========================================================
   21. MODAL FOOTER
========================================================= */

.modal-footer-custom {
    display: flex;
    justify-content: flex-end;

    flex-shrink: 0;

    padding: 15px 25px;

    background: #f8fafc;
    border-top: 1px solid #edf1f5;
}

.modal-footer-custom button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 20px;

    border: 0;
    border-radius: 7px;

    background: var(--primary);
    color: #fff;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
    transition: .25s;
}

.modal-footer-custom button:hover {
    background: #045da8;
}


/* =========================================================
   22. PAGINATION
========================================================= */


/* =====================================
   FACULTY PAGINATION
===================================== */

.faculty-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 35px auto 20px;
    padding: 15px 0;
}

/* Pagination list */
.faculty-pagination .pagination {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 7px;

    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove default list styles */
.faculty-pagination .pagination li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* Page links and numbers */
.faculty-pagination .page-link {
    display: flex;
    justify-content: center;
    align-items: center;

    min-width: 38px;
    height: 38px;
    padding: 7px 12px;

    border: 1px solid #dce5f1;
    border-radius: 8px !important;

    background: #ffffff;
    color: #0755a5;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition: all 0.25s ease;
}

/* Hover effect */
.faculty-pagination .page-link:hover {
    background: #0755a5;
    color: #ffffff;
    border-color: #0755a5;

    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(7, 85, 165, 0.18);
}

/* Active page */
.faculty-pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #0755a5, #087bd5);
    color: #ffffff;
    border-color: #0755a5;

    box-shadow: 0 3px 9px rgba(7, 85, 165, 0.25);
}

/* Disabled Previous / Next */
.faculty-pagination .page-item.disabled .page-link {
    background: #f1f4f8;
    color: #aab4c1;
    border-color: #e5eaf0;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Remove Bootstrap focus outline */
.faculty-pagination .page-link:focus {
    box-shadow: none;
    outline: none;
}

/* Mobile responsive */
@media (max-width: 575px) {
    .faculty-pagination {
        margin-top: 20px;
        padding: 10px 0;
    }

    .faculty-pagination .pagination {
        gap: 4px;
    }

    .faculty-pagination .page-link {
        min-width: 32px;
        height: 34px;
        padding: 5px 9px;
        font-size: 12px;
    }
}


/* =========================================================
   23. TABLET RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .top-inner,
    .brand-inner {
        padding-left: 25px;
        padding-right: 25px;
    }

    .dhr-brand img {
        width: 290px;
    }

    .programme-name strong {
        font-size: 13px;
    }

    .faculty-content .container-fluid {
        padding-left: 25px;
        padding-right: 25px;
    }

    .faculty-hero {
        padding-left: 5%;
        padding-right: 5%;
    }
}


/* =========================================================
   24. MOBILE RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    /* Government header */

    .top-inner {
        flex-direction: column;
        align-items: flex-start;

        padding: 0 18px;
        gap: 12px;
    }

    .gov {
        gap: 8px;
        flex-wrap: wrap;
    }

    .gov-copy strong {
        font-size: 9px;
    }

    .gov-copy span {
        font-size: 8px;
    }

    .emblem {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .divider {
        height: 29px;
        margin: 0 3px;
    }

    .top-links {
        flex-wrap: wrap;
        gap: 9px;
        font-size: 10px;
    }


    /* Brand header */

    .brand-inner {
        flex-direction: column;
        align-items: flex-start;

        padding: 15px 18px;
        gap: 12px;
    }

    .dhr-brand {
        flex-wrap: wrap;
        gap: 10px;
    }

    .dhr-brand img {
        width: 100%;
        max-width: 300px;
        max-height: 70px;

        object-position: left;
    }

    .brand-divider {
        display: none;
    }

    .programme-name {
        width: 100%;
    }

    .programme-name strong {
        font-size: 13px;
    }

    .brand-back {
        padding: 9px 15px;
    }


    /* Hero */

    .faculty-hero {
        padding: 42px 22px;
    }

    .faculty-hero h1 {
        font-size: 27px;
        margin-top: 18px;
    }

    .faculty-hero p {
        font-size: 12px;
    }

    .hero-stats {
        gap: 20px;
        margin-top: 25px;
    }

    .hero-stat > i {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }


    /* Content */

    .faculty-content {
        padding: 32px 0 45px;
    }

    .faculty-content .container-fluid {
        padding: 0 16px;
    }

    .faculty-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .faculty-heading h2 {
        font-size: 23px;
    }

    .faculty-total {
        padding: 9px 13px;
    }


    /* Search */

    .faculty-filter {
        flex-direction: column;
        gap: 10px;
    }

    .faculty-search,
    .faculty-year-filter {
        width: 100%;
        height: 46px;
    }


    /* Cards */

    .faculty-grid .faculty-card {
        min-height: 0;
    }

    .faculty-photo {
        width: 73px;
        height: 73px;
    }

    .faculty-name h3 {
        font-size: 14px;
    }


    /* Modal */

    .faculty-modal {
        padding: 12px 8px;
    }

    .faculty-modal-content {
        max-height: calc(100vh - 24px);
    }

    .modal-profile-header {
        padding: 18px;
        gap: 13px;
    }

    .modal-photo {
        width: 76px;
        height: 76px;
    }

    .modal-profile-header h2 {
        font-size: 16px;
    }

    .modal-profile-header p {
        font-size: 10px;
    }

    .modal-body-custom {
        padding: 15px;
    }

    .modal-info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .modal-header-custom {
        padding: 15px 18px;
    }

    .modal-footer-custom {
        padding: 13px 18px;
    }

}


/* =========================================================
   25. SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .faculty-hero h1 {
        font-size: 24px;
    }

    .hero-stats {
        gap: 15px;
    }

    .hero-stat strong {
        font-size: 16px;
    }

    .faculty-profile {
        gap: 11px;
        padding: 18px 13px;
    }

    .faculty-details {
        padding-left: 13px;
        padding-right: 13px;
    }

    .research-section {
        margin-left: 13px;
        margin-right: 13px;
    }

    .faculty-card-footer {
        padding: 12px 13px;
    }

    .faculty-department {
        font-size: 8px;
    }

    .view-profile-btn {
        padding: 8px 9px;
        font-size: 9px;
    }

    .modal-profile-header {
        align-items: flex-start;
    }

}


/* =========================================================
   26. ACCESSIBILITY AND MOTION
========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(8,117,201,.35);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}